<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<h:head>
</h:head>


<h:body>
	<ui:composition template="/template/common/commonLayout.xhtml">

		<ui:define name="content">
			<h:form id="form">
				<!-- Mini popup -->
				<p:growl id="growl" showDetail="true" />


				<p:dataTable id="dataTable" var="e" value="#{employe.listEmploye}"
					paginator="true" rows="10" editable="true"
					filteredValue="#{employe.filteredEmploye}">
					<p:ajax event="rowEdit" listener="#{employe.onEdit}"
						update=":form:growl" />
					<p:ajax event="rowEditCancel" listener="#{employe.onCancel}"
						update=":form:growl" />
					<f:facet name="header">
			liste des employés
			</f:facet>
					<p:column sortBy="id" headerText="ID" filterBy="id"
						filterMatchMode="contains">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{e.id}" />
							</f:facet>
							<f:facet name="input">
								<h:inputText value="#{e.id}" />
							</f:facet>
						</p:cellEditor>
					</p:column>
					<p:column sortBy="nom" headerText="Nom" filterBy="nom"
						filterMatchMode="contains">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{e.nom}" />
							</f:facet>
							<f:facet name="input">
								<h:inputText value="#{e.nom}" />
							</f:facet>
						</p:cellEditor>
					</p:column>
					<p:column sortBy="prenom" headerText="Prénom" filterBy="prenom"
						filterMatchMode="contains">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{e.prenom}" />
							</f:facet>
							<f:facet name="input">
								<h:inputText value="#{e.prenom}" />
							</f:facet>
						</p:cellEditor>
					</p:column>
					<p:column sortBy="naissance" headerText="Date naissance"
						filterBy="naissance" filterMatchMode="contains">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{e.naissance}" />
							</f:facet>
							<f:facet name="input">
								<h:inputText value="#{e.naissance}" />
							</f:facet>
						</p:cellEditor>
					</p:column>
					<p:column sortBy="email" headerText="E-mail" filterBy="email"
						filterMatchMode="contains">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{e.email}" />
							</f:facet>
							<f:facet name="input">
								<h:inputText value="#{e.email}" />
							</f:facet>
						</p:cellEditor>
					</p:column>
					<p:column sortBy="fonction" headerText="fonction"
						filterBy="fonction" filterMatchMode="contains">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{e.fonction}" />
							</f:facet>
							<f:facet name="input">
								<h:inputText value="#{e.fonction}" />
							</f:facet>
						</p:cellEditor>
					</p:column>
					<p:column sortBy="agence" headerText="agence" filterBy="agence"
						filterMatchMode="contains">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{e.agence}" />
							</f:facet>
							<f:facet name="input">
								<h:inputText value="#{e.agence}" />
							</f:facet>
						</p:cellEditor>
					</p:column>
					<p:column sortBy="etp" headerText="etp" filterBy="etp "
						filterMatchMode="contains">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{e.etp}" />
							</f:facet>
							<f:facet name="input">
								<h:inputText value="#{e.etp}" />
							</f:facet>
						</p:cellEditor>
					</p:column>
					<p:column headerText="Edition" style="width:50px">

						<p:rowEditor />


					</p:column>
					<p:column headerText="Détails" style="width:50px">
						<f:facet name="header">Détails</f:facet>
						<p:commandButton oncomplete="PF('employeDialog').show();" update=":form:displayEmployeDetails" icon="ui-icon-search" title="View">
							<f:setPropertyActionListener value="#{e}" target="#{employe.selectedEmploye}" />
						</p:commandButton>
					</p:column>

				</p:dataTable>

				<!-- Popup Fiche Employé de l'employé sélectionné -->
				<p:dialog header="Employé Détail" widgetVar="employeDialog" ajax="true" resizable="false" id="employeDlg" showEffect="fade" hideEffect="explode" modal="false">
					<p:panel id="employepanel">
					
					
					
					<h:panelGrid id="displayEmployeDetails" columns="2" cellpadding="4">

						<f:facet name="header">
							<p:graphicImage value="#{resource['images:default.jpg']}" />
						</f:facet>

						<h:outputText value="ID :" />
						<h:outputText id="supertest" value="#{employe.selectedEmploye.id}" />

						<h:outputText value="Nom :" />
						<h:outputText value="#{employe.selectedEmploye.nom}" />

						<p:dataTable id="dataTableCompetencesEmploye" var="c"
							value="#{competence.getCompetenceForEmploye(employe.selectedEmploye.id)}">
							<f:facet name="header">
			liste des compétences
			</f:facet>
							<p:column>
								<h:outputText value="#{c.nom}" />
							</p:column>
						</p:dataTable>



						<p:dataTable id="dataTableEtapeProjetEmploye" var="f"
							value="#{etapeProjet.getEtapeProjetForEmploye(employe.selectedEmploye.id)}"
							editable="false"
							filteredValue="#{etapeProjet.filteredEtapeProjet}"
							selection="#{etapeProjet.selectedEtapeProjet}"
							selectionMode="single" rowKey="#{f.id}">
							<f:facet name="header">
			liste des projets
			</f:facet>
							<p:column>
								<p:cellEditor>
									<f:facet name="output">
										<h:outputText value="#{f.nom}" />
									</f:facet>
									<f:facet name="input">
										<h:inputText value="#{f.nom}" />
									</f:facet>
								</p:cellEditor>

							</p:column>
						</p:dataTable>

					</h:panelGrid>
					</p:panel>
				</p:dialog>

				<h:panelGrid columns="1" cellpadding="5">
					<p:commandButton id="ajoutDialogButton" value="Ajouter"
						onclick="PF('dlg').show();" type="button" />
				</h:panelGrid>
				<p:dialog id="ajoutDialog" header="Ajout d'un employé"
					widgetVar="dlg" modal="false" resizable="false">
					<p:panel id="panel" style="margin-bottom:10px;">
						<p:messages id="messages" />
						<h:panelGrid columns="3">
							<h:outputLabel for="nom" value="Nom : *" />
							<p:inputText id="nom" value="#{employe.nom}" required="true"
								label="Nom">
								<f:validateLength minimum="2" />
							</p:inputText>
							<p:message for="nom" />
							<h:outputLabel for="prenom" value="Prénom : *" />
							<p:inputText id="prenom" value="#{employe.prenom}"
								required="true" label="Prénom" />
							<p:message for="prenom" />
							<h:outputLabel for="naissance" value="Date de naissance :" />
							<p:inputText id="naissance" value="#{employe.naissance}"
								label="Naissance">
								<f:validateLength minimum="2" />
							</p:inputText>
							<p:message for="naissance" />
							<h:outputLabel for="email" value="E-mail :" />
							<p:inputText id="email" value="#{employe.email}" label="Email" />
							<p:message for="email" />
							<h:outputLabel for="fonction" value="Fonction :" />
							<p:inputText id="fonction" value="#{employe.fonction}"
								label="Fonction" />
							<p:message for="fonction" />
							<h:outputLabel for="agence" value="Agence :" />
							<p:inputText id="agence" value="#{employe.agence}" label="Agence" />
							<p:message for="agence" />
							<h:outputLabel for="etp" value="ETP :" />
							<p:inputText id="etp" value="#{employe.etp}" label="ETP" />
							<p:message for="etp" />
						</h:panelGrid>
					</p:panel>

					<p:commandButton value="Enregistrer"
						actionListener="#{employe.insertEmploye()}"
						oncomplete="PF('dlg').hide()" id="enregistrer"
						update="panel,dataTable" icon="ui-icon-disk" ajax="true" />
				</p:dialog>
			</h:form>


		</ui:define>
	</ui:composition>
</h:body>


</html>